<template>
  <!-- 发货单实时看板（店铺维度统计发货商品数量） -->
  <div class="fba-real-time-user">
    <div class="header">
      <h3>发货单实时看板（店铺维度统计发货商品数量）</h3>
      <ul class="flex-c">
        <li class="sum-item">
          <p class="name">待处理</p>
          <p class="val">发货单数：{{ sunMap.stayCount }}</p>
        </li>
        <li class="sum-item">
          <p>仓库处理中</p>
          <p class="val">发货单数：{{ sunMap.warehouseCount }}</p>
        </li>
      </ul>
    </div>
    <div class="search-w">
      <a-space>
        <a-select v-model="searchVal.shopId" placeholder="选择店铺" style="width: 300px" allow-search allow-clear>
          <a-option v-for="(shop, i) in shopList" :key="i" :value="shop.sellerMarketId" :label="shop.shopName" />
        </a-select>
        <a-button type="primary" @click="getTableList">搜索</a-button>
      </a-space>
    </div>
    <div class="table-w">
      <a-table class="table-singe-line show-border-table" ref="tableRef" row-key="id" :summary="true" :scroll="{ y: '100%' }" :loading="tableLoading" :data="tableList" size="mini" :bordered="{ headerCell: true }" :pagination="false">
        <template #columns>
          <a-table-column data-index="sort" title="序号" :width="45">
            <template #cell="{ rowIndex }">
              <p>{{ rowIndex + 1 }}</p>
            </template>
          </a-table-column>
          <a-table-column data-index="shopName" title="店铺" :width="90">
            <template #cell="{ record }">
              <TextLimit key="shopName" :val="record.shopName" />
            </template>
          </a-table-column>
          <a-table-column title="待处理">
            <a-table-column data-index="stayUrgentAmt" title="紧急" :width="60" :sortable="sortable" />
            <a-table-column data-index="stayCommonAmt" title="普通" :width="60" :sortable="sortable" />
            <a-table-column data-index="stayAmt" title="合计" :width="60" :sortable="sortable" />
          </a-table-column>
          <a-table-column title="仓库处理中">
            <a-table-column data-index="warehouseUrgentAmt" title="紧急" :width="60" :sortable="sortable" />
            <a-table-column data-index="warehouseCommonAmt" title="普通" :width="60" :sortable="sortable" />
            <a-table-column data-index="warehouseAmt" title="合计" :width="60" :sortable="sortable" />
          </a-table-column>
          <a-table-column data-index="toBeReceived" title="待收货合计" :width="90" :sortable="sortable" />
        </template>
        <template #summary-cell="{ column, record }">
          <p v-if="column.dataIndex == 'sort'">合计</p>
          <p v-else-if="column.dataIndex == 'shopName'"></p>
          <p v-else>{{ record[column.dataIndex] }}</p>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, PropType } from 'vue'
  import { findFbaShipmentStatisticsTimeByShop, findFbaShipmentCountTimeByShop } from '@/api/purchase'
  onMounted(async () => {
    getTableList()
  })
  const props = defineProps({
    shopList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
  })
  const searchVal = ref<any>({})
  const tableLoading = ref(false)
  const tableList = ref<Array<any>>([])
  const sortable: any = ref({
    sortDirections: ['descend', 'ascend'],
  })
  const sunMap = ref<any>({})

  // 获取商品列表
  async function getTableList() {
    tableLoading.value = true
    const res: any = await findFbaShipmentStatisticsTimeByShop(searchVal.value)
    tableLoading.value = false
    tableList.value = res?.data || []
    getSumMap()
  }
  // 数量合计
  async function getSumMap() {
    const res: any = await findFbaShipmentCountTimeByShop(searchVal.value)
    sunMap.value = res?.data || {}
  }
</script>
<style lang="less" scoped>
  :deep(.arco-table-sorter) {
    margin-left: 0;
  }
  .fba-real-time-user {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    .header {
      margin-bottom: 10px;
      h3 {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      .time {
        color: #999;
      }
      .sum-item {
        border: 1px solid #ddd;
        margin-right: 10px;
        padding: 5px;
        width: 130px;
        .val {
          color: #999;
          font-size: 12px;
        }
      }
    }
    .search-w {
      display: flex;
      margin-bottom: 10px;
    }
    .table-w {
      flex: 1;
      overflow: hidden;
    }
    :deep(.arco-table-scroll-y) {
      border-bottom: none;
    }
  }
</style>
